<template>
  <div>
    <div class="user">
      <div class="user-info">
        <img
          src=""
          alt=""
          v-if="bool == 1"
        />
        <img :src="this.avatar" alt="" v-if="bool == 2" />
        <h3 @click="dologin" v-if="bool == 1">点击登录</h3>
        <h3 v-if="bool == 2">{{ usernames }}</h3>
        <!-- 登录弹出层 -->
        <van-popup v-model="show">
          <div class="login_huamian">
            <van-form @submit="onSubmit">
              <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="pwd"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit"
                  >提交</van-button
                >
              </div>
            </van-form>
          </div>
        </van-popup>
        <van-icon name="arrow" v-if="bool == 1" />
        <van-icon name="cross" v-if="bool == 2" @click="outlogin" />
      </div>
    </div>
    <div class="person_class">
      <van-grid :column-num="3">
        <van-grid-item icon="label-o" text="我的订单" />
        <van-grid-item icon="bill-o" text="优惠券" />
        <van-grid-item icon="goods-collect-o" text="礼品卡" />
        <van-grid-item icon="location-o" text="我的收藏" />
        <van-grid-item icon="flag-o" text="我的足迹" />
        <van-grid-item icon="contact" text="会员福利" />
        <van-grid-item icon="aim" text="地址管理" />
        <van-grid-item icon="warn-o" text="账号安全" />
        <van-grid-item icon="service-o" text="联系客服" />
        <van-grid-item icon="question-o" text="帮助中心" />
        <van-grid-item icon="comment-o" text="意见反馈" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Dialog } from 'vant';
export default {
  name: "H559Person",

  components: {},

  directives: {},

  data() {
    return {
      bool: 1,
      show: false,
      username: "",
      password: "",
      avatar: "",
      usernames: "",
      avatar: "",
      token: "",
      show2: false,
    };
  },

  mounted() {},

  methods: {
    dologin() {
      // console.log(123);
      this.show = true;
    },

    // 登录功能
    onSubmit(k) {
      // console.log(k);
      axios.post("/api/auth/loginByWeb", k).then((res) => {
        // console.log(res);
        this.usernames = res.data.data.userInfo.username;
        this.avatar = res.data.data.userInfo.avatar;
        this.token = res.data.data.token;
        // console.log(this.token);
        localStorage.setItem("tok", this.token);
        localStorage.setItem("user1", JSON.stringify(this.avatar));
        localStorage.setItem("user2", this.username);
        if (this.token) {
          this.show = false;
          this.bool = 2;
        }
      });
    },

    // 退出登录功能
    outlogin() {
      this.show2 = true;
      Dialog.confirm({
        title: "退出账号确认",
        message: "您是否想要退出当前账号？",
      })
        .then(() => {
          window.localStorage.clear();
          this.bool = 1;
        })
        .catch(() => {
          // on cancel
        });
        
    },
  },

  created() {
     let user1 = JSON.parse(localStorage.getItem("user1"));
     let user2 = localStorage.getItem("user2");
     if(user1 && user2){
        this.avatar=user1;
         this.usernames=user2
        this.bool = 2
     }
  },
};
</script>

<style lang="less" scoped>
</style>